{% extends "repo/repo.html" %}

{% block bubble_inner_class_name %} network{% endblock %}

{% block subcontainer %}

	<header class="header clearfix">
		<h1 class="heading">仓库成员列表</h1>
	</header>

	<div class="members">
		{%for member_vo in members_vo%}
			<div class="member">
				<div class="user-plugin">
					<figure class="avatar">
						<img src="https://gravatar.com/avatar/{{ member_vo.imgurl }}?s=65" alt="{{ gsuser.username }}">
					</figure>
					<div class="info">
						<p class="name">
							<a href="/{{member_vo.username}}/">{{member_vo.username}}</a>
							{%if member_vo.nickname%}
								<span>({{member_vo.nickname}})</span>
							{%endif%}
						</p>
						<p class="meta">
							{%if member_vo.tweet%}
								<span class="tweet">{{member_vo.tweet}}</span>
							{%endif%}
						</p>
					</div>
					{% if member_vo.username != user_name %}
						<a href="javascript:void(0)" class="c_rm_member c_rm_rf_member delete-member"><i class="icon-trash"></i></a>
					{% endif %}
				</div>
			</div>
		{%endfor%}
		<div class="member" id="new-member-container">
			<a href="#" id="i_add_member" class="add-new-member"><i class="icon-plus-sign"></i> 添加新成员</a>
			<form id="id_submit_form" class="form-inline" method="post" action="">
				{% csrf_token %}
				<div id="i_name_input" class="fiels">
					{{repoMemberForm.username}}
					{{repoMemberForm.action}}
					<button type="submit" class="btn btn-success" id="id_submit">添加</button>
				</div>
			</form>
		</div>
	</div>

{% endblock %}

{% block subjs %}

<script>
$(function(){
    $('#id_action').hide();
		$('#id_submit_form').hide();
    $('#i_add_member').on('click',function(event) {
        $(this).hide().parents(".member").addClass("active");
        $('#id_submit_form').show();
        $('#id_action').val('add_member');
        $('#id_username').focus();
    });
    $('.c_rm_member').click(function(event) {
        $(this).next().show();
        $(this).next().focus();
    });
    $('.c_rm_rf_member').blur(function(event) {
        $(this).hide()
    });
    $('.c_rm_rf_member').click(function(event) {
        $('#id_username').val($(this).attr('value'));
        $('#id_action').val('remove_member');
        $('#id_submit_form').submit()
    });
    $('#id_username').blur(function(event) {
			setTimeout(
				function(event) {
					$('#id_submit_form').hide().parents(".member").removeClass("active");
					$('#i_add_member').show();
				}
			, 300);
    });
    $('.c_tr').bind('mouseover mouseout', function(event) {
        if (event.type == 'mouseover') {
            $(this).find('.c_rm_member').show();
        } else {
            $(this).find('.c_rm_member').hide();
        }
    });


		var memberContainer = $(".member:first");
				memberContainerHeight = memberContainer.height();
		var newMemberBtn = $("#new-member-container > .add-new-member");
		newMemberBtn.css({
			display: "block",
			height: memberContainerHeight + "px",
			lineHeight: memberContainerHeight + "px",
			fontSize: "14px",
			fontWeight: "bold"
		});

		var deleteTxt = $(".delete-member").html();
		$(".delete-member").hover(
			function(){
				$(this).addClass("btn btn-mini btn-danger").text("删除");
			}, function(){
				$(this).removeClass("btn-danger").html(deleteTxt);
			}
		);


});
</script>
{% endblock %}
